<template>
	<div class="root">
		<my-header htitle="粘棒-固化区" :date="date"></my-header>
		<div class="content">
			<div class="a">A</div>
			<div class="spectacul">
				 <spect :list="spect_A"></spect>
			</div>
		</div>

		<div class="content">
			<div class="a">B</div>
			<div class="spectacul">
				 <spect :list="spect_B"></spect>
			</div>
		</div>
		
	</div>
</template>
<script>
import MyHeader from '@/components/Header'   
import Spect from './components/Spectaculars'

import {getZhanBanggh} from "../../api/chart"


export default{
     components:{
     	MyHeader,
     	Spect
     },
     data () {
        return{
           date:'',
           kanbanList:[],
           list_A:[],
           list_B:[],
           spect_A:[],
           spect_B:[]
        }
     },
     methods:{
        getInfo () {
	     	getZhanBanggh().then((data)=>{
		            this.date = data.date
					this.kanbanList = data.msg
					for(var i in this.kanbanList){
					      if(this.kanbanList[i].colum<=25){
					      	this.list_A.unshift(this.kanbanList[i])
					      	this.spect_A = this.list_A.slice(0,150)

					      }else{
					      	this.list_B.unshift(this.kanbanList[i])
					      	this.spect_B = this.list_B.slice(0,150)
					      }  
					   }

		     	}).catch((error) => {
		            console.log(error)
	            })
        }
     
	  },
	  mounted () {
	    clearTimeout(timer);
        this.getInfo()
        var timer = setInterval(this.getInfo,5000);
	  }

}
</script>
<style  scoped>
.root{
	background:#383A53;
	width:1920px;
	height:1080px;
}

.content{
	width:1860px;
	height:456px;
	margin:0 auto;
	margin-top:30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.spectacul{
	width:1800px;
	height:100%;
}

.a{
	width:60px;
	font-size:40px;
	color:#fff;
	display:flex;
	justify-content:center;
}
			
</style>